<template>
  <div>
    <ul class="box">
      <li v-for="(item,index) in imgData"
          :key="item.id">
        <img :src='item.src.url'
             alt=""
             srcset="">
        <ul>
          <li>
            <img @click="imgAct(item.id)"
                 :src="dianzan"
                 :data-img='item.id'
                 alt=""
                 ref="img"
                 srcset="">
            <span>评论数({{item.common}})</span>
          </li>
          <li>点赞数(1)</li>
        </ul>
      </li>

    </ul>
    <el-pagination background
                   layout="prev, pager, next"
                   :total="imgSum">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSum: 1,
      // 点赞的
      dianzan: require("@/assets/icon/dianz.png"),
      imgData: [
        {
          id: 1,
          src: { url: require("@/assets/images/1440x900/1.jpeg") },
          common: 2,
        },
        {
          id: 2,
          src: { url: require("@/assets/images/1440x900/2.jpeg") },
          common: 20,
        },
      ],
    };
  },

  methods: {
    // 切换图片颜色
    imgAct(id) {
      this.$nextTick(() => {
        
        if (id == this.$refs.dataImg) {
          this.dianzan = require("@/assets/icon/ac-dianz.png");
        }
      });
    },
  },
  mounted() {
    console.log(this.$refs);
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  > li {
    border: 1px solid #395178;
    width: 25%;
    height: 240px;
    display: flex;
    margin: 10px 0 20px;
    // padding: 0;
    flex-direction: column;
    ul {
      display: flex;
      width: 100%;
      li {
        position: relative;
        width: 50%;
        text-align: center;
        height: 40px;
        &:first-child {
          border-right: 1px dashed #395178;
        }
        line-height: 40px;

        span {
          margin: 0 8px;
          display: inline-block;
        }

        img {
          cursor: pointer;
          vertical-align: text-bottom;
          width: 24px;
          height: 20px;
        }
      }
    }
    img {
      width: 100%;
      height: 200px;

      display: inline;
    }
  }
}
</style>